<script setup lang="ts">
import {Delete, Edit} from "@element-plus/icons-vue";
import {useRoute, useRouter} from "vue-router";
import {reqDeleteUser} from "@/api/user/user.ts";
import {ElMessage} from "element-plus";
//弊端：name和inheritAttrs两个属性有可能被组件库的开发人员使用
// defineOptions({
//   name:'Visitor',
//   inheritAttrs:false
// })
const props = defineProps(['visitor','index','currentIndex','getUserInfo'])
const $route = useRoute()

let $emit = defineEmits()
const $router = useRouter()
function handler(){
  if($route.path=='/user/patient'){
    $emit('changeShowForm',props.visitor)
  }else{
    // console.log('预约挂号')
    $router.push({
      path:'/user/patient',
      query:{
        type:'edit',
        id:props.visitor.id
      }
    })
  }
}
/**
 * 删除一个就诊人
 */
async function removeVisitor(){
  try {
    // console.log(props.visitor.id)
    let res = await reqDeleteUser(props.visitor.id)
    // console.log(res)
    if(res.data){
      ElMessage({type:'success',message:'删除成功'})
      props.getUserInfo()
    }else {
      ElMessage({type:'warning',message:'删除失败，系统错误！'})
    }
  }catch (e){
    ElMessage({type:'error',message:'删除失败'})
  }
}
</script>

<template>
<div class="visitor">
  <div class="top">
    <div class="l">
      <span class="type">{{ visitor.isInsure==1?'医保':'自费' }}</span>
      <span class="name">{{ visitor.name }}</span>
    </div>
    <div class="r">
      <el-button type="primary" circle :icon="Edit" class="edit" @click="handler"></el-button>
      <el-popconfirm :title='`是否确认删除${ visitor.name}吗?`' width="200" @confirm="removeVisitor">
        <template #reference>
          <el-button type="danger" v-if="'/user/patient'===$route.path" circle :icon="Delete" class="edit"></el-button>
        </template>
      </el-popconfirm>
    </div>
  </div>
  <div class="bottom">
    <ul>
      <li>
        <dl>
          <dt>证件类型：</dt>
          <dd>{{visitor.param.certificatesTypeString}}</dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt>证件证件号码：</dt>
          <dd>{{visitor.certificatesNo}}</dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt>用户性别：</dt>
          <dd>{{visitor.sex==1?'男':'女'}}</dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt>出生日期：</dt>
          <dd>{{visitor.birthdate}}</dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt>手机号码：</dt>
          <dd>{{visitor.phone}}</dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt>婚姻状况：</dt>
          <dd>{{visitor.isMarry==1?'已婚':'未婚'}}</dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt>当前住址：</dt>
          <dd>{{visitor.address}}</dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt>详细地址：</dt>
          <dd>{{visitor.param.fullAddress}}</dd>
        </dl>
      </li>
    </ul>
    <transition name="confirm">
      <div class="confirm" v-if="currentIndex===index">
        已选择
      </div>
    </transition>
  </div>
</div>
</template>

<style scoped lang="scss">
.visitor{
  width: 32%;
  margin-right: 1.333%;
  margin-bottom: 15px;
  //box-shadow: 0 0 20px #e5e5e5;
  .top{
    height: 60px;
    background: #E5E5E5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    .type{
      background: white;
      padding: 2px;
      margin-right: 8px;
    }
  }
  .bottom{
    position: relative;
    padding: 20px;
    .confirm{
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 2px  solid red;
      line-height: 198px;
      text-align: center;
      color: red;
      font-size: 30px;
      font-weight: 600;
      opacity: .3;
      left: 40px;
      top: 35px;
    }
    //动画开始
    .confirm-enter-from{
      transform: scale(1);
    }
    //动画时间
    .confirm-enter-active{
      transition:all .3s;
    }
    //动画结束
    .confirm-enter-to{
      transform: scale(1.2);
    }
    ul{
      li{
        dl{
          display: flex;
          line-height: 1.5em;
          flex-wrap: wrap;
          dd{
            color: #7f7f7f;
          }
        }
      }
    }
  }
}
</style>